<template>
	<el-container>
	  <el-header>
		  <common-header @on-collapse="Collapse"></common-header>
	  </el-header>
	  <el-container>
	    <el-aside width="209">
			<transition >
				<el-menu default-active="1-1" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9"
					:unique-opened="false" active-text-color="#409EFF" :collapse-transition="false"
					class="el-menu-vertical">
					<el-submenu v-for="(item,index) in data" :index="'m-'+index">
						<template slot="title">
							<i :class="item.icon"></i>
							<span slot="title">{{item.name}}</span>
						</template>
			
						<div v-for="(itemList,indexList) in item.list" :key="indexList">
							<el-menu-item :index="index+1+'-'+parseInt(indexList+1)"
								@click="skipClick(itemList.path,itemList.params)">
								<span class="pull-right side-ladge" v-if="itemList.count">{{itemList.count}}</span>
								<i :class="itemList.icon"></i>
								{{itemList.name}}
			
							</el-menu-item>
						</div>
					</el-submenu>
				</el-menu>
			</transition>
		</el-aside>
	    <el-container>
	      <el-main class="user-main">
	      	<router-view />
	      </el-main>
	      <!-- <el-footer>Footer</el-footer> -->
	    </el-container>
	  </el-container>
	</el-container>
</template>

<script>
	import CommonHeader from "../components/common-header.vue";

	export default {
		name: "index",
		data() {
			return {
				isHomePage: false,
				isSystemManage: false,
				isCollapse: false, //是否拉开
				btnIndex: "",
				menuList: "",
				data: [{
						name: '基础功能',
						icon: 'el-icon-menu',
						list: []
					},
					{
						name: '流程查询',
						icon: 'el-icon-s-help',
						list: [{
								name: "我发起的",
								path: "mysend",
								icon: 'el-icon-s-promotion',
								params: {
									"EnsName": "BP.WF.Data.MyStartFlows"
								}
							},
							{
								name: "我参与的",
								path: "myjoin",
								icon: 'el-icon-s-operation',
								params: {
									"EnsName": "BP.WF.Data.MyJoinFlows"
								}
							},
							{
								name: "逾期流程",
								path: "beoverdue",
								icon: 'el-icon-timer',
								params: {
									"EnsName": "BP.WF.Data.Delays"
								}
							}
						]
					}
				]
			};
		},

		created() {
			var handler = new this.HttpHandler("BP.WF.HttpHandler.WF_AppClassic");
			var data = handler.DoMethodReturnString("Home_Init");
			if (data.indexOf('err@') == 0) {
				this.$message.error(data);
				console.log(data);
				return;
			}
			data = JSON.parse(data);
			this.data[0].list.push({
				name: '发起',
				path: 'start',
				icon: 'el-icon-position'
			});
			this.data[0].list.push({
				name: '待办',
				path: 'todolist',
				icon: 'el-icon-bell',
				count: data.Todolist_EmpWorks
			});
			this.data[0].list.push({
				name: '在途',
				path: 'runing',
				icon: 'el-icon-time',
				count: data.Todolist_Runing
			});
			this.data[0].list.push({
				name: '已完成',
				path: 'complete',
				icon: 'el-icon-circle-check',
				count: data.Todolist_Complete
			});
			this.data[0].list.push({
				name: '批处理',
				path: 'batchbo',
				icon: 'el-icon-files',
				count: 0
			});
			this.data[0].list.push({
				name: '草稿',
				path: 'draft',
				icon: 'el-icon-edit-outline'
			});
			this.data[0].list.push({
				name: '抄送',
				path: 'send',
				icon: 'el-icon-edit'
			})
		},

		methods: {
			// 跳转页面
			skipClick(path, params) {
				if (params != null && params != undefined)
					this.$store.commit('setData', params);
				this.$router.push({
					name: path
				});
			},
			Collapse(data) {
				this.isCollapse = data
			}

		},
		components: {
			CommonHeader
		},

		//监听
		computed: {
			activeMenu() {
				const route = this.$route
				const {
					meta,
					path
				} = route
				// if set path, the sidebar will highlight the path you set
				if (meta.activeMenu) {
					return meta.activeMenu
				}
				return path
			},

		},

		//监听后执行动作
		watch: {}
	};
</script>

<style lang="less" scoped>
	.main-side {
		background: #304156;
		border-right: solid 1px #e6e6e6
	}

	.el-menu-vertical-demo i {
		color: #fff !important;
	}

	.el-submenu__title i {
		color: #fff !important;
	}

	.side-ladge {
		background: #657a92;
		width: 20px;
		height: 20px;
		margin-top: 15px;
		border-radius: 50%;
		font-size: 0.65rem;
		line-height: 20px;
		text-align: center;
		color: #fff
	}

	.el-menu {
		border-right: 0px
	}

	.el-container {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}


	.el-header {
		padding-right: 0;
		background-color: #367ea8;
	}
</style>
<style>
	.el-menu-vertical{
		width: 209px;
		min-height: 100%;
	}
</style>
